<template>
    <el-main>
        <div class="t4_banner">
            <div class="t4_w">
                <div class="t4_bannerBOX">
                    <el-input v-model="searchInfo" type="text" name="keywords" id="keywords" placeholder="请输入资源名称"
                        clearable @keyup.enter.native="searchHandle">
                        <el-button @click="searchHandle" slot="append" icon="el-icon-search">搜索</el-button>
                    </el-input>
                    <ul class="list_Ul">
                        <li v-for="(item, index) in hotWordList" :key="index">
                            <a @click="hotClick(item)">{{ item }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="t4_content">
            <div class="t4_contents_top">
                <div class="t4_w" style="position: relative">
                    <div class="t4_local">
                        <span class="local-tag"><img src="@/assets/images/sub_ts.png" alt="" /></span>
                        <a href="/">首页</a> &gt; 资源列表
                    </div>
                    <div class="phone_css" style="height: auto; min-height: 950px" v-show="!infoFlag">
                        <div class="lTop-box">
                            <div class="proList">
                                <div class="tit">资源类别：</div>
                                <ul class="clearfix transUl" :style="{height:maxHeight}">
                                    <li :class="resTypeAct === '' ? 'proAct' : ''" @click="choosePro('')">
                                        全部
                                    </li>
                                    <li v-for="(item, index) in resTypeList"
                                        :class="resTypeAct === item.code ? 'proAct' : ''" :key="index"
                                        @click="choosePro(item)"
                                        :title="item.name">
                                        {{ item.name }}
                                    </li>
                                </ul>
                              <div class="toggleBtn" v-if="resTypeList.length > 5" @click="toggleMore">
                                <span v-show="!isOpen">展&nbsp;开</span>
                                <span v-show="isOpen">收&nbsp;起</span>
                              </div>
                            </div>
                          <div class="proList">
                            <div class="filter-container" style="width: 100%;">
                              部门筛选：
                              <ul class="clearfix transUl" :style="{height:maxHeight}">
                                <li style="margin-top: 10px;" v-for="(item, index) in itemssss" :key="index"
                                    :class="{ 'proAct': selectedItemssss.id == item.id }"
                                    @click="selectItemsss(item)"
                                    :title="item.name">
                                  {{ item.name }}
                                </li>
                              </ul>
                              <div class="toggleBtn" v-if="itemssss.length > 5" @click="toggleMore">
                                <span v-show="!isOpen">展&nbsp;开</span>
                                <span v-show="isOpen">收&nbsp;起</span>
                              </div>
                            </div>
                          </div>
                          <div class="proList">
                            <div class="filter-container" style="width: 100%;">
                              领域筛选：
                              <ul class="clearfix transUl" :style="{height:maxHeight}">
                                <li style="margin-top: 10px;" v-for="(item, index) in items" :key="index"
                                    :class="{ 'proAct': selectedItem.id == item.id }" @click="selectItem(item)"
                                    :title="item.name">
                                  {{ item.name }}
                                </li>
                              </ul>
                              <div class="toggleBtn" v-if="items.length > 5" @click="toggleMore">
                                <span v-show="!isOpen">展&nbsp;开</span>
                                <span v-show="isOpen">收&nbsp;起</span>
                              </div>
                            </div>
                          </div>
                          <div class="proList">

                            <div class="filter-container" style="width: 100%;">标签筛选：
                              <ul class="clearfix transUl" :style="{height:maxHeight}">
                                <li style="margin-top: 10px;" v-for="(items, index) in itemss" :key="index"
                                    :class="{ 'proAct': selectedItems.id == items.id }" @click="selectItems(items)"
                                    :title="items.name">
                                  {{ items.name }}
                                </li>
                              </ul>
                              <div class="toggleBtn" v-if="itemss.length > 5" @click="toggleMore">
                                <span v-show="!isOpen">展&nbsp;开</span>
                                <span v-show="isOpen">收&nbsp;起</span>
                              </div>
                            </div>
                          </div>
                          <div class="proList">
                            <div class="filter-container" style="width: 100%;">场景筛选：
                              <ul class="clearfix transUl" :style="{height:maxHeight}">
                                <li style="margin-top: 10px;" v-for="(itemss, index) in itemsss" :key="index"
                                    :class="{ 'proAct': selectedItemss.id == itemss.id }" @click="selectItemss(itemss)"
                                    :title="itemss.name">
                                  {{ itemss.name }}
                                </li>
                                <div class="toggleBtn" v-if="itemsss.length > 5" @click="toggleMore">
                                  <span v-show="!isOpen">展&nbsp;开</span>
                                  <span v-show="isOpen">收&nbsp;起</span>
                                </div>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="listToggle">
                            <span @click="toggleList('info')"><img style="width: 18px" :src="infoImg" alt="" /></span>
                            <span @click="toggleList('list')"><img style="width: 20px" :src="listImg" alt="" /></span>
                        </div>
                        <div class="t4_r_top t4_border" style="height: auto">
                            <div class="t4_r_sjCons">
                                <!-- 目录列表 -->
                                <div class="t4_sjCons" style="display: block">
                                    <div v-if="listFlag === 'info'" v-for="(item, index) in infoList" :key="index"
                                        class="t2_sjCons_list t2_result_list_r2">
                                        <h2 class="titBox">

                                            <a @click="infoHandle(item)">
                                                <img src="@/assets/images/icon1.png"
                                                    style="padding: 0 8px; height: 24px" />{{ item.name }}</a>

<!--                                            <el-tag effect="dark">-->
<!--                                                {{ item.name }}-->
<!--                                            </el-tag>-->
                                        </h2>
                                        <div class="zyInfoBox">
                                            <div class="zyInfo">
                                                <div>资源分类：{{ item.meunName }}</div>
                                                <div class="infoItem_box">
                                                    <div class="infoItem">
                                                        <div>资源提供方：{{ item.xxzytgf }}</div>
                                                        <div>
                                                            共享类型：{{
                                                                item.gxtype
                                                            }}
                                                        </div>
                                                    </div>
                                                    <div class="infoItem">
                                                        <div>创建时间：{{ item.createTime }}</div>
                                                        <div>
                                                            更新周期：{{
                                                                item.frequency
                                                            }}
                                                        </div>
                                                    </div>
                                                    <div class="infoItem">
                                                        <div>共享条件：{{ item.gxtype=== '无条件共享'?'无':item.gxtj }}</div>
                                                        <div>
                                                            共享方式：{{ item.gxfs }}
                                                        </div>
                                                    </div>
                                                    <!-- <div class="infoItem">
                                                        <div>
                                                            资源类型：{{

                                                            }}
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="" id="pageDiv">
                                        <el-pagination background @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange" :current-page="currentPage"
                                            :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                                            layout="total, prev, pager, next, sizes, jumper" :total="totalNum">
                                        </el-pagination>
                                    </div>
                                </div>
                                <!-- 目录列表 end -->
                            </div>
                        </div>
                    </div>
                    <div v-show="infoFlag" class="www" style="height: auto; min-height: 560px">
                        <div class="listToggle backBtn">
                            <!-- infoFlag = false -->
                            <el-button size="small" type="primary" @click="goindex">返回列表</el-button>
                        </div>
                        <dataInfo :updateCycleList="updateCycleList" :shareTypeList="shareTypeList"
                            :ShareModeList="ShareModeList" :resTpye="resTpye"></dataInfo>
                    </div>
                </div>
            </div>
        </div>
    </el-main>
</template>

<script>
import {
    topFive,
    getCatalogData,
    getResourceList,
    getUpdateCycle,
    getHomeSeek,
    getbmlist,
    getSjmlTreeList
} from "../../utils/httpUtils";
import listImg from "@/assets/images/list.png";
import listImgAct from "@/assets/images/list-act.png";
import infoImg from "@/assets/images/infoList.png";
import infoImgAct from "@/assets/images/infoList-act.png";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";
import dataInfo from "./dataInfo";
import Cookies from "js-cookie";

export default {
    name: "index",
    components: {
        dataInfo,

    },
    data() {
        return {
            ids: null,
            isOpen: false,
            maxHeight: '45px',
            ificationCode: "",
            checkActArr: [],
            resTpye: "",
            themeCode: "",
            infoFlag: false,
            listFlag: "info",
            // 热门关键词
            hotWordList: [],
            // 搜索内容
            searchInfo: "",
            deptArr: [],
            deptAct: "",
            infoList: [],
            listImg: listImg,
            infoImg: infoImgAct,
            multipleSelection: [],
            currentPage: 1,
            pageSize: 10,
            totalNum: 0,
            pageNo: 1,
            code: "",
            name: "",
            resTypeAct: '',
            updateCycleList: [],
            shareTypeList: [],
            ShareModeList: [],
            resTypeList: [
                {
                    code: 0,
                    name: "数据资源",
                },
                {
                    code: 1,
                    name: "服务资源",
                },
            ],
            items: [],
            itemss: [],
            itemsss: [],
            itemssss: [],
            lydata: [],
            lydatas: [],
            lydatass: [],
            lydatassss: [],
            selectedItem: '全部',
            selectedItems: '全部',
            selectedItemss: '全部',
            selectedItemssss: '全部',
            jcid: null,
            bqid: null,
            cjid: null,
            tokens: JSON.parse(Cookies.get("token")),
        };
    },
    mounted() {
        // document.documentElement.scrollTop = 278;
        console.log(this.$route.query, "this.$route.query123");
        if (this.$route.query.searchVal) {
            this.searchInfo = this.$route.query.searchVal;
        }
      // 点击首页数据分类 跳转对应内容
      if (this.$route.query.themeVal) {
        this.themeCode = this.$route.query.themeVal.code;
        let param = {
          id: this.$route.query.themeVal.id,
          name: this.$route.query.themeVal.name
        }
        if(this.$route.query.themeVal.type == 1) {
          this.selectItemsss(param)
        }else if(this.$route.query.themeVal.type == 2) {
          this.selectItem(param)
        }else if(this.$route.query.themeVal.type == 3) {
          this.selectItems(param)
        }else if(this.$route.query.themeVal.type == 4) {
          this.selectItemss(param)
        }
      }
        this.init();
        this.getsonlist()
        // if (this.$route.query.themeVal) {
        //     this.themeCode = this.$route.query.themeVal.code;
        // }
        // if (this.$route.query.classification) {
        //     this.getbmiddata(this.$route.query.classification);
        // }
        // this.searchHandle();
    },
    methods: {
        toggleMore() {
          this.isOpen = !this.isOpen
          if(this.isOpen) {
            this.maxHeight = 'max-content'
          }else {
            this.maxHeight = '45px'
          }
        },
        getsonlist() {
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=2`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.items = [];

                // 首先向 this.items 添加一个特殊的对象
                this.items.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydata = res.data
                this.lydata.forEach((item) => {
                    this.items.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
              if(this.$route.query.themeVal && this.$route.query.themeVal.type == 2) {
                let param = {
                  id: this.$route.query.themeVal.id,
                  name: this.$route.query.themeVal.name
                }
                this.selectedItem = param
              }else {
                this.selectedItem = this.items[0];
              }

            })
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=3`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.itemss = [];

                // 首先向 this.items 添加一个特殊的对象
                this.itemss.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydatas = res.data
                this.lydatas.forEach((item) => {
                    this.itemss.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
              if(this.$route.query.themeVal && this.$route.query.themeVal.type == 3) {
                let param = {
                  id: this.$route.query.themeVal.id,
                  name: this.$route.query.themeVal.name
                }
                this.selectedItems = param
              }else {
                this.selectedItems = this.itemss[0];
              }
                console.log(this.selectedItems, "选中的item");

            })
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=1`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.itemssss = [];

                // 首先向 this.items 添加一个特殊的对象
                this.itemssss.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydatassss = res.data
                this.lydatassss.forEach((item) => {
                    this.itemssss.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
              if(this.$route.query.themeVal && this.$route.query.themeVal.type == 1) {
                let param = {
                  id: this.$route.query.themeVal.id,
                  name: this.$route.query.themeVal.name
                }
                this.selectedItemssss = param
              }else {
                this.selectedItemssss = this.itemssss[0];
              }
                console.log(this.selectedItemssss, "selectedItemssss1");

            })
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=4`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.itemsss = [];

                // 首先向 this.items 添加一个特殊的对象
                this.itemsss.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydatass = res.data
                this.lydatass.forEach((item) => {
                    this.itemsss.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
              if(this.$route.query.themeVal && this.$route.query.themeVal.type == 4) {
                let param = {
                  id: this.$route.query.themeVal.id,
                  name: this.$route.query.themeVal.name
                }
                this.selectedItemss = param
              }else {
                this.selectedItemss = this.itemsss[0];
              }
                console.log(this.selectedItemss, "选中的item");

            })


        },
        selectItem(item) {
          this.selectedItem = item;
          this.jcid = item.id
          this.currentPage = 1;
          this.init();
        },
        selectItems(item) {
          this.selectedItems = item;
          this.bqid = item.id
          this.currentPage = 1;
          this.init();
        },
        selectItemss(item) {
            this.selectedItemss = item;
            this.cjid = item.id
            this.currentPage = 1;
            this.init();
        },
        selectItemsss(item) {
            this.selectedItemssss = item;
            console.log(this.selectedItemssss,"selectedItemssss2")
            this.ids = item.id
            this.currentPage = 1;
            this.init();
        },
        goindex() {
            this.infoFlag = false;
            this.infoList.forEach((item) => {
                item.isAct = false;
            });
            this.$bus.$emit("initxxx", "");
        },



        infoHandle(val) {
            console.log(val, "val");
            this.infoFlag = true;
            this.$bus.$emit("dataInfo", val);
            this.$bus.$emit("infoList1", this.infoList);
            // document.documentElement.scrollTop = 250;
        },


        // 获取部门数据
        getbmiddata(item) {
            // let param = {
            //     id: item.id,
            //     pageNo: 1,
            //     size: 10,
            //     deptType: 1
            // }
            // getbmlist(param).then((res) => {
            //     console.log(res, "ress");
            //     this.infoList = res.content
            // })






        },
        clearText(event) {
            event.stopPropagation();
            this.searchInfo = "";
        },
        init() {
            // this.getHotWord();
            // this.getTypeList();
            let param = {
                id: this.ids,
                deptType: this.resTypeAct,
                jcid: this.jcid,
                bqid: this.bqid,
                cjid: this.cjid,
                pageNo: this.currentPage,
                size: this.pageSize,
                name: this.searchInfo,
            }
            getSjmlTreeList(param).then((res) => {
                console.log(res, "ress");
                this.totalNum = res.totalElements
                this.infoList = res.content
            })
        },
        getTypeList() {
            //获取更新频率字段
            getUpdateCycle("updateCycle").then((res) => {
                if (res) {
                    this.updateCycleList = res.data;
                }
            });
            // 获取共享类型字段
            getUpdateCycle("shareType").then((res) => {
                if (res) {
                    this.shareTypeList = res.data;
                }
            });
            // 获取共享方式字段
            getUpdateCycle("ShareMode").then((res) => {
                if (res) {
                    this.ShareModeList = res.data;
                }
            });
        },
        // 获取列表数据
        getListData() {
            let param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                name: this.searchInfo,
                type: this.resTypeAct,
                jcid: this.jcid,
                bqid: this.bqid,
                cjid: this.cjid,
                themeCode: this.themeCode,
                code: this.ificationCode,
            };
            if (this.ificationCode) {
                getResourceList(param).then((res) => {
                    if (res.data) {
                        this.infoList = res.data.totalList;
                        this.currentPage = res.data.currentPage;
                        this.pageSize = res.data.pageSize;
                        this.totalNum = res.data.totalPageNum;
                    }
                });
            } else {
                getHomeSeek(param).then((res) => {
                    if (res.data) {
                        this.infoList = res.data.totalList;
                        this.currentPage = res.data.currentPage;
                        this.pageSize = res.data.pageSize;
                        this.totalNum = res.data.totalPageNum;
                    }
                });
            }
        },
        // 选择资源类型
        choosePro(val) {
            this.resTypeAct = val ? val.code : "";
            this.currentPage = 1;
            this.init();
        },
        // 改变数据显示条数
        handleSizeChange(val) {
            this.pageSize = val;
            // this.getListData();
            this.init();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            // this.getListData();
            this.init();
        },
        async getHotWord() {
            // 热门关键词
            const { data: res } = await topFive();
            if (res) {
                this.hotWordList = res;
            }
        },
        hotClick(val) {
            this.searchInfo = val;
            this.searchHandle();
        },
        searchHandle() {
            this.currentPage = 1;
            this.init();
        },
        changeHandle(event, val) {
            if (this.checkActArr.length == 0 && event) {
                this.checkActArr.push(val);
            }
        },
        // 切换数据显示样式
        toggleList(val) {
            this.listFlag = val;
            if (val === "info") {
                if (this.infoImg === infoImg) {
                    this.infoImg = infoImgAct;
                    this.listImg = listImg;
                }
            } else {
                if (this.listImg === listImg) {
                    this.listImg = listImgAct;
                    this.infoImg = infoImg;
                }
            }
        },
        // infoHandle(val) {
        //     console.log(val, "val.resourceType");
        //     let path = "";
        //     // 0数据目录，1服务目录
        //     if (val.resourceType == 0) {
        //         path = "/dataDirectory";
        //     } else if (val.resourceType == 1) {
        //         path = "/serviceDirectory";
        //     }
        //     this.$router.push({ path: path, query: { searchVal: val.name } });
        // },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
    },
};
</script>

<style scoped>
  .filter-container {
    position: relative;
  }
  .transUl {
    overflow: hidden;
    /*transition: height 3s;*/
  }
  .filter-container .toggleBtn {
    position: absolute;
    bottom: 5px;
    right: 0;
    cursor: pointer;
  }
  .clearfix:after {
    content:'';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
  }
  .clearfix{
    display: block;
  }
.el-main {
    padding: 0;
}

.t4_qb {
    width: 70px;
    padding: 5px;
    background: #198ef8;
    float: left;
    text-align: center;
    cursor: pointer;
}

.t4_qb a {
    color: #fff;
}

.phone_css {
    /*height: 950px;*/
    background-color: #fff;
}

.t4_search ul li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lTop-box {
    padding: 0 0 15px;
    background-color: #f7f8fa;
}

.lTop-box .proList {
    padding: 15px 30px;
    background-color: #fff;
    border-bottom: 4px solid #198ef8;
    display: flex;
    flex-direction: row;
}

.lTop-box .proList .tit {
    width: 85px;
    padding: 5px 0;
}

.lTop-box .proList ul {
    flex: 1;
    padding: 0;
    margin: 0;
}

.lTop-box .proList ul li {
    float: left;
    text-align: center;
    padding: 5px 10px;
    height: 30px;
    width: 18.5%;
    margin: 0 5px;
    background-color: #f8f8f8;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 24px;
    padding-right: 24px;
}

.lTop-box .proList ul li.proAct {
    background-color: #f1f8ff;
    color: #204dac;
}

.listToggle {
    padding: 13px 20px;
}

.listToggle span {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

.listToggle.backBtn {
    border-bottom: 4px solid #198ef8;
}

#pageDiv {
    text-align: center;
    padding: 20px;
}

#pageDiv /deep/ .el-select__caret {
    width: auto;
    height: auto;
}

#pageDiv /deep/ .el-pagination__jump {
    color: #606266;
    margin: 0;
}

.gxfs img {
    width: 20px;
}

.zyInfoBox {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo {
    flex: 1;
    margin-left: 8px;
    font-size: 13px;
}

.zyInfoBox .zyInfo .infoItem_box {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem {
    flex: 1;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem>div {
    margin-top: 8px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
    display: inline-block;
    margin-right: 5px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
    width: 18px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
    width: 22px;
}

h2.titBox {
    position: relative;
}

h2.titBox .sqBtn {
    position: absolute;
    right: 0;
    top: 0;
}

h2.titBox a {
    cursor: pointer;
}

h2.titBox span.el-tag {
    font-size: 12px;
    color: #fff;
    height: 26px;
    line-height: 24px;
    vertical-align: text-bottom;
    margin-left: 15px;
}

.t4_banner {
    position: relative;
}

.t4_banner .t4_bannerBOX {
    width: 90%;
    margin: 0 auto;
}

.t4_banner .t4_bannerBOX .list_Ul {
    cursor: pointer;
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40px;
    height: 10px;
}

.t4_banner .t4_bannerBOX .list_Ul li {
    margin-left: 10px;
    color: #5f5f5f;
}

.t4_banner .t4_bannerBOX .list_Ul a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/deep/ .t4_banner .el-input-group--append .el-input__inner {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border: 1px solid #fff;
    color: #636363;
    text-indent: 15px;
}

/deep/ .t4_banner .el-input-group__append {
    background-color: #198ef8;
    color: #fff;
    border: none;
}

.highlighted {
    background: #198ef8 !important;
    color: #fff !important;
}
</style>
